<template>
  <view class="login">
    <cover-image
      v-if="showGoBack"
      class="goBack_box"
      :style="'top:'+globalData.menuButtonObject.top+'px;'"
      src="@/static/image/goBack_con.png"
      @click.stop="navigateBack">
     </cover-image>

    <view class="flex-col">
      <view class="flex-row group_4">
        <image
          src="https://image.qqpyyds.com/mpAppImg/icon/logo1_icon.png"
          class=""
        />
      </view>
      <view class="flex-col items-center group_6">
        <image
          src="https://image.qqpyyds.com/mpAppImg/other/login_logo_name.png"
          class="image_11"
        />
        <text class="text_2">超好用的社群分销工具</text>
      </view>
      <view class="flex-col group_7">
        <button
          class="justify-center button"
          @tap="getUserProfile"
          hover-class="hover"
          :disabled="disabledType"
        >
          <image
            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16316933015986949076.png"
            class="image_12"
          />
          <view class="text_3">微信一键登录</view>
        </button>
        <view class="justify-evenly group_8" v-if="!empowerBtnType">
          <div class="checkbox_img_box" @click.stop="loginAgreementFn">
            <text class="iconfont icon-checkbox_fill fz-16 themeFontColor" v-if="loginAgreement"></text>
            <text class="iconfont icon-checkbox fz-16 viceColorN4" v-else></text>
          </div>
          <div class="text_box"><i>同意</i><span class="text-link" @click="policyTypeFn(1)">用户协议</span><i>及</i><span class="text-link" @click="policyTypeFn(2)">隐私政策</span></div>
        </view>
      </view>
    </view>
    <PrivacyPolicy v-if="policyType == 2" @closePolicyFn="closePolicyFn"/>
    <UserAgreement v-if="policyType == 1" @closePolicyFn="closePolicyFn"/>
  </view>
</template>
<script>
import userApi from "@/api/user.js";
// import store from "@/store";
import PrivacyPolicy from "../login/privacyPolicy.vue";
import UserAgreement from "../login/userAgreement.vue";
export default {
  name: "Login",
  data() {
    return {
      loginAgreement: false,
      empowerBtnType: false,
      disabledType: false,
      policyType: 0,
    };
  },
  components: { PrivacyPolicy, UserAgreement },
  computed: {
    globalData() {
      return this.$store.state.globalData;
    },
    // 是否显示返回按钮，默认不显示
    showGoBack(){
      const routes = getCurrentPages()
      if(routes.length < 2){
        return false
      }else{
        const { route } = routes[routes.length - 2]
        if(route === 'pages/my/index' || route === 'pages/index/index'){
          return true
        }else{
          return false
        }
      }
    }
  },
  onShow() {
    if (this.$store.state.token && !this.$store.state.userInfo.mobile) {
      this.empowerBtnType = true;
    }
  },
  methods: {
    closePolicyFn () {
      this.policyType = 0
    },
    policyTypeFn (type) {
      this.policyType = type
    },
    loginAgreementFn(e) {
      this.loginAgreement = !this.loginAgreement;
    },
    async getUserProfile() {
      const _this = this;
      let accountInfo = wx.getAccountInfoSync();
      if (_this.loginAgreement) {
        _this.disabledType = true;
        wx.getUserProfile({
          desc: "用于完善用户信息",
          success: (res) => {
            let params = { ...res.userInfo, nickname: res.userInfo.nickName };
            wx.login({
              async success(res) {
                params = {
                  ...params,
                  auth_appid: accountInfo.miniProgram.appId,
                  code: res.code,
                };
                if (res.code) {
                  if(_this.$store.state.loginShareIdCode){params.recommendCode = _this.$store.state.loginShareIdCode} // 绑定推荐人
                  // 发起网络请求
                  userApi.authLogin(params).then(async (res_) => {
                    try {
                      // TODO设置token 缓存
                      if (res_.code == 200) {
                        uni.setStorageSync("token", res_.data.token);
                        _this.$store.commit("TOKEN", res_.data.token);
                        _this.$store.commit("USERINFO", res_.data.userInfoVO);
                        _this.setIsRefreshType(true)
                        // console.log(store, "storestore");
                        _this.navigateBack({
                          delta: 1,
                        });
                      }
                      _this.disabledType = false;
                    } catch (e) {
                      _this.disabledType = false;
                      console.error(e);
                    }
                  });
                } else {
                  _this.disabledType = false;
                  console.log("登录失败！" + res.errMsg);
                }
              },
            });
          },
          complete: () => {
            _this.disabledType = false;
          },
        });
      } else {
        wx.showToast({
          icon: "none",
          title: "请阅读并同意用户协议及隐私政策!",
          mask: false,
        });
        _this.disabledType = false;
      }
    },
  },
};
</script>
<style>
.interestthreecheckbox .wx-checkbox-input {
  border-radius: 50%;
  width: 28rpx;
  height: 28rpx;
}
.interestthreecheckbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 28rpx; /* 选中后对勾大小 */
  height: 28rpx; /* 选中后对勾大小 */
  font-size: 28rpx; /* 对勾大小30rpx */
  color: #e44435; /* 对勾颜色  */
}
</style>
<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .goBack_box {
    position: fixed;
    z-index: 999;
    width: 60rpx;
    height: 60rpx;
    left: 32rpx;
    top: 48px;
  }
}
.group_4 {
  width: 100%;
  height: 128rpx;
  position: relative;
  display: flex;
  justify-content: center;
  image {
    width: 128rpx;
    height: 128rpx;
  }
}
.group_6 {
  margin-top: 39rpx;
  color: rgb(228, 68, 53);
  font-size: 28rpx;
  line-height: 40rpx;
  letter-spacing: 16rpx;
  white-space: nowrap;
}
.group_7 {
  margin-top: 294rpx;
}
.image_5 {
  width: 97rpx;
  height: 79rpx;
  position: absolute;
  left: 181rpx;
  top: 0;
}
.image_6 {
  width: 24rpx;
  height: 64rpx;
  position: absolute;
  left: 196rpx;
  top: 56rpx;
}
.group_5 {
  width: 87rpx;
  position: absolute;
  left: 214rpx;
  top: 84rpx;
}
.image_9 {
  width: 46rpx;
  height: 46rpx;
  position: absolute;
  left: 265rpx;
  top: 51rpx;
}
.image_10 {
  width: 24rpx;
  height: 64rpx;
  position: absolute;
  left: 272rpx;
  top: 10rpx;
}
.image_11 {
  width: 200rpx;
  height: 64rpx;
}
.text_2 {
  margin-top: 24rpx;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 40rpx;
  letter-spacing: 8rpx;
}
.button {
  width: 494rpx;
  padding: 28rpx 0 24rpx;
  color: rgb(255, 255, 255);
  font-size: 32rpx;
  line-height: 44rpx;
  white-space: nowrap;
  background-color: rgb(7, 193, 96);
  border-radius: 48rpx;
}
.group_8 {
  margin: 16rpx auto 0;
  color: rgb(170, 170, 170);
  font-size: 24rpx;
  line-height: 34rpx;
  white-space: nowrap;
  display: flex;
  align-items: center;
  .checkbox_img_box {
    padding: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.image_7 {
  width: 46rpx;
  height: 46rpx;
}
.image_8 {
  width: 64rpx;
  height: 24rpx;
  position: absolute;
  right: 1.5e-28rpx;
  top: 50%;
  transform: translateY(-50%);
}
.image_12 {
  margin: 4rpx 0 6rpx;
  width: 40rpx;
  height: 34rpx;
}
.text_3 {
  margin-left: 16rpx;
}
.image_13 {
  margin-top: 4rpx;
  width: 28rpx;
  height: 28rpx;
}

.login-agreement {
  color: #aaa;
}
.u-radio__label {
  margin: 0 !important;
}

.text-link {
  color: #0391eb;
}
.text_box {
  display: flex;
  align-items: center;
}
</style>
